<template>
  <view class="container">
    <view class="title-row">
      <button class="back-btn" @click="goBack">返回</button>
      <view class="title">自定义菜谱</view>
    </view>
    <view class="content-area">
      <button class="add-btn" @click="goToEdit">新增自定义菜谱</button>
      <view v-if="customRecipes.length === 0" class="placeholder">暂无自定义菜谱</view>
      <view v-else>
        <view v-for="recipe in customRecipes" :key="recipe.id" class="recipe-item" @click="goToDetail(recipe.id)">
          <text class="recipe-name">{{ recipe.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customRecipes: []
    }
  },
  onShow() {
    this.loadCustom()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    loadCustom() {
      this.customRecipes = uni.getStorageSync('custom') || []
    },
    goToEdit() {
      uni.navigateTo({ url: '/pages/custom-recipe-edit/custom-recipe-edit' })
    },
    goToDetail(id) {
      uni.navigateTo({ url: '/pages/recipe-detail/recipe-detail?id=' + id })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f7f7f7;
}
.title-row {
  display: flex;
  align-items: center;
  padding: 32rpx 0 24rpx 0;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #1976D2;
  background: none;
  border: none;
}
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.content-area {
  flex: 1;
  padding: 24rpx;
}
.add-btn {
  width: 90vw;
  height: 80rpx;
  background: #90caf9;
  color: #222;
  font-size: 18px;
  font-weight: bold;
  border-radius: 40rpx;
  margin: 0 auto 24rpx auto;
  border: none;
}
.placeholder {
  color: #bbb;
  font-size: 16px;
  text-align: center;
  margin-top: 40rpx;
}
.recipe-item {
  background: #e3f2fd;
  border-radius: 10rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  cursor: pointer;
}
.recipe-name {
  font-size: 18px;
  color: #1976d2;
  font-weight: bold;
}
</style> 